<template>
  <div class="login-page">
    <div class="container">
      <div style="transform: scale(2)">
        <div class="form">
          <div class="center">
            <span style="letter-spacing: 4px;">智护视界</span>
          </div>
          <ElInput
              v-model="state.loginForm.userName"
              style="width: 240px"
              placeholder="请输入用户名"
              :prefix-icon="User"
          />
          <ElInput
              v-model="state.loginForm.passWord"
              style="width: 240px"
              type="password"
              placeholder="请输入密码"
              show-password
              :prefix-icon="Lock"
          />
          <div class="items-center" v-if="state.status === 'login'">
            <el-radio-group v-model="state.loginForm.role" class="ml-4">
              <el-radio value="user" size="large">用户</el-radio>
              <el-radio value="admin" size="large">管理员</el-radio>
            </el-radio-group>
          </div>
          <div class="items-center" v-if="state.status === 'register'">
            <el-select
                v-model="state.loginForm.role"
                placeholder="Select"
                style="width: 240px"
            >
              <el-option
                  v-for="item in roleOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </div>
          <ElButton
              v-if="state.status === 'login'"
              type="primary"
              @click="loginHandle"
          >
            登录
          </ElButton>
          <ElButton
              v-if="state.status === 'register'"
              type="primary"
              @click="registerHandle"
          >
           注册
          </ElButton>
          <div class="register">
            <div class="text">{{state.status === 'login' ? '没有账号' : '已有账号'}}?</div>
            <el-button type="primary" @click="switchLoginOrRegister">
              {{state.status === 'login' ? '立即注册' : '立即登录'}}
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue'
import { scaleContainer } from "@/utils/utils";
import { User, Lock } from '@element-plus/icons-vue'
import { ElInput, ElButton, ElMessage } from 'element-plus';
import { storeToRefs } from "pinia"; //引入pinia转换
import { useRouter } from "vue-router";
import axios from "axios";
import useUserStore from '@/stores/userStore';

const router = useRouter();
const userStore = useUserStore();
let {userName,userRole,isLogin} = storeToRefs(userStore);

const roleOptions = [{label:"普通用户",value:"user"},{label:"管理员",value:"admin"}]

const state = reactive({
  loginForm: {
    userName: "",
    passWord: "",
    role: "user"
  },
  status: 'login'
})

const switchLoginOrRegister = () => {
  if(state.status === 'login'){
    state.status = 'register';
  }else{
    state.status = 'login';
  }
}

const loginHandle = () => {
  const param = {
    username: state.loginForm.userName,
    password: state.loginForm.passWord,
    usertype: state.loginForm.role
  }

  axios.post("http://localhost:8080/loginCopy", param,{
    headers:{
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  }).then((res)=>{
    if(res.data == '登陆成功'){
      ElMessage.success(res.data);
      userName.value = state.loginForm.userName;
      userRole.value = state.loginForm.role;
      isLogin.value = true;
      router.push({ path: '/Home' });
    }else{
      ElMessage.error(res.data);
    }
  })
}

const registerHandle = () => {
  const param = {
    username: state.loginForm.userName,
    password: state.loginForm.passWord,
    usertype: state.loginForm.role
  }
  axios.post("http://localhost:8080/registerCopy",param,{
    headers:{
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  }).then((response)=>{
    if(response.data == '注册成功，请登陆'){
      state.loginForm.passWord = "";
      state.status = 'login';
      ElMessage.success(response.data)
    }else{
      ElMessage.error(response.data)
    }
  })
}

onMounted(() => {
  scaleContainer(".container");
  window.onresize = () => {
    scaleContainer(".container");
  };
});

</script>

<style lang="less">
.login-page {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  position: relative;
  background-image: url("@/assets/login/bg.jpg");
  background-size: 100% 100%;

  .container {
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: top left;
    width: 3840px;
    height: 2160px;
    display: flex;
    align-items: center;
    justify-content: center;

    .form{
      display: flex;
      flex-direction: column;
      background-color: rgba(51, 72, 89, 0.9);
      border-radius: 5px;
      border: 2px solid #3b90be;
      padding: 50px;

      .register{
        padding-top: 35px;
        display: flex;
        justify-content: center;

        .el-button{
          margin-left: 5px;
          height: 24px;
        }

        .text{
          color: white;
        }
      }

      .items-center{
        display: flex;
        justify-content: center;
        padding-bottom: 20px;
        .el-radio-group{
          .el-radio{
            .el-radio__label{
              color: white;
            }
          }
        }
      }

      .el-input{
        padding-bottom: 20px;
      }

      .center {
        flex: 1;
        text-align: center;

        font-size: 60px;
        font-family: biaoti;
        font-weight: 600;
        color: #FFFFFF;

        background: linear-gradient(0deg, #B9CFFF 0%, #FFFFFF 99.0478515625%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transform: translateY(-8px);
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 20px;
      }
    }
  }
}
</style>
